<template>

    <div>
        <!-- 使用接口数据遍历轮播图，由于现在访问不到了,先用下面代替 -->
        <!-- 在组件中，使用v-for循环的话，一定要使用 key -->
        <!-- <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
                <img :src="item.img" alt="" :class="{'full':isfull  }">
            </mt-swipe-item>
        </mt-swipe> -->
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../images/1.jpg" alt="" :class="{'full': isfull}"></mt-swipe-item>
            <mt-swipe-item><img src="../../images/menu1.png" alt="" :class="{'full': isfull}"></mt-swipe-item>
            <mt-swipe-item><img src="../../images/menu2.png" alt="" :class="{'full': isfull}"></mt-swipe-item>
        </mt-swipe>



    </div>
    
</template>

<script>
    export default {
        //接收传递过来的轮播图数据，显示对应的内容
        props: ['lunbotuList','isfull']
    }

</script>

<style lang="scss" scoped>
    /*轮播图样式*/
    .mint-swipe {
        height: 200px;
       .mint-swipe-item {
           text-align: center;
            // &:nth-child(1){
            //     background-color: red;
            // }
            // &:nth-child(2){
            //     background-color: blue;
            // }
            // &:nth-child(3){
            //     background-color: yellow;
            // }
            img {
               // width: 100%;
                height: 100%;
            }
           
        }
    }
    
    /*这个类是根据父组件传过来的true和false显示的*/

    .full {width: 100%;}
                
            

</style>